基于Java spring + vue3 + nuxt构建的内容管理系统
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

114 lines
2.4 KiB

<!-- 文章详情 -->
<template>
<PageContainer :form="form" />
<div class="page-main md:w-screen-xl m-auto bg-white rounded-lg">
<div class="p-4 leading-7" v-html="form?.content">
</div>
</div>
</template>
<script setup lang="ts">
import type {ApiResult} from "~/api";
import {useServerRequest} from "~/composables/useServerRequest";
import {useWebsite} from "~/composables/configState";
import type {BreadcrumbItem} from "~/types/global";
import type {Navigation} from "~/api/cms/navigation/model";
import {getIdBySpm} from "~/utils/common";
import type {Article} from "~/api/cms/article/model";
import useFormData from "~/utils/use-form-data";
// 引入状态管理
const route = useRoute();
const website = useWebsite();
const breadcrumb = ref<BreadcrumbItem>();
// 配置信息
const { form, assignFields } = useFormData<Article>({
// 文章id
articleId: undefined,
// 文章标题
title: undefined,
// 分类类型
type: undefined,
// 展现方式
showType: undefined,
// 文章类型
categoryId: undefined,
// 文章分类
categoryName: undefined,
parentId: undefined,
parentName: undefined,
// 封面图
image: undefined,
// 附件
files: undefined,
// 缩列图
thumbnail: undefined,
// 视频地址
video: undefined,
// 上传的文件类型
accept: undefined,
// 来源
source: undefined,
// 文章内容
content: undefined,
// 虚拟阅读量
virtualViews: undefined,
// 实际阅读量
actualViews: undefined,
// 用户ID
userId: undefined,
// 用户昵称
nickname: undefined,
// 账号
username: undefined,
// 用户头像
userAvatar: undefined,
// 所属门店ID
shopId: undefined,
//
likes: undefined,
// 排序
sortNumber: undefined,
// 备注
comments: undefined,
// 状态
status: undefined,
// 创建时间
createTime: undefined,
// 更新时间
updateTime: undefined
});
// 请求数据
const reload = async () => {
// 存在spm(优先级高)
const { data: nav } = await useServerRequest<ApiResult<Navigation>>('/cms/cms-article/' + getIdBySpm(5))
if (nav.value?.data) {
assignFields(nav.value.data)
}
// seo
useHead({
title: `${form.title} - ${website.value.websiteName}`,
bodyAttrs: {
class: "page-container",
}
});
// 面包屑
breadcrumb.value = form
}
watch(
() => route.path,
(path) => {
console.log(path,'=>Path')
reload();
},
{ immediate: true }
);
</script>